
import {Component,createRef} from 'react';
import { Form, Input, Button, InputNumber,Radio } from 'antd';
import {departmentAdd, departmentDetailed,departmentEdit} from "../../api/department";

export default class DepartmentAdd extends Component{
    constructor(props) {
        super(props);
        this.state = {
            layout:{
                labelCol: { span: 2 },
                wrapperCol: { span: 20 },
            },
            tailLayout:{
                wrapperCol: { offset: 8, span: 16 }
            },
            loading:false,
            initValues:{ status: true, number: 1,name:'',content:'' }
        }
        this.addForm = createRef()
    }

    componentDidMount() {
        console.log()
        if( this.props.location.state && this.props.location.state.id ){
            departmentDetailed({
                id:this.props.location.state.id
            }).then(e=>{
                this.addForm.current.setFieldsValue(e.data)
                this.setState({
                    ...this.state,
                    id:this.props.location.state.id
                })
            })
        }
    }

    render() {
        const onFinish = (values) => {
            this.setState({
                ...this.state,
                loading:true
            })
            if(this.state.id){
                values.id = this.state.id;
                departmentEdit(values).then(e=>{
                    this.setState({
                        ...this.state,
                        loading:false
                    })
                    this.addForm.current.resetFields()
                }).catch(()=>{
                    this.setState({
                        ...this.state,
                        loading:false
                    })
                })
            }else{
                departmentAdd(values).then(e=>{
                    this.setState({
                        ...this.state,
                        loading:false
                    })
                    this.addForm.current.resetFields()
                }).catch(()=>{
                    this.setState({
                        ...this.state,
                        loading:false
                    })
                })
            }

        };

        const onFinishFailed = (errorInfo) => {
            console.log('Failed:', errorInfo);
        };

        return(
            <Form
                ref={this.addForm}
                {...this.state.layout}
                name="basic"
                initialValues={this.state.initValues}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="部门名称"
                    name="name"
                    rules={[{ required: true, message: '请填写部门名称！' }]}
                >
                    <Input   />
                </Form.Item>
                <Form.Item
                    label="人员数量"
                    name="number"
                    rules={[{ required: true, message: '请填写人员数量！' }]}
                >
                    <InputNumber min={1} max={100} />
                </Form.Item>
                <Form.Item
                    label="是否启用"
                    name="status"
                >
                <Radio.Group  >
                    <Radio value={false}>禁用</Radio>
                    <Radio value={true}>启用</Radio>
                </Radio.Group>
                </Form.Item>
                <Form.Item
                    label="描述"
                    name="content"
                    rules={[{ required: true, message: '请填写描述！' }]}
                >
                    <Input.TextArea />
                </Form.Item>
                <Form.Item  wrapperCol={{offset:2}} >
                    <Button loading={this.state.loading} type="primary" htmlType="submit">提交</Button>
                </Form.Item>
            </Form>
        )
    }
}